import React, {Component} from 'react'
import { Tabs ,Icon } from 'antd';
import * as OrgInfoAPI from '../../utils/OrgInfoAPI'
import OrgInfoStore from '../../store/OrgInfoStore'
import { Form, Input, Tooltip, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete,Avatar } from 'antd';
import {observer} from 'mobx-react'

const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;
const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
const orgInfoStore = new OrgInfoStore()

const TabPane = Tabs.TabPane;
function callback(key) {
  console.log(key);
}

@observer
class IndexContent extends Component {
   componentDidMount () {
    OrgInfoAPI.getAll()
    .then(orginfo => {
      orgInfoStore.updateauthen(orginfo.usrAuthen)
      orgInfoStore.updateinfo(orginfo.usrInfo)
       orgInfoStore.updatelist(orginfo.list)
    })
  }
  render () {
    const formItemLayout = {
      labelCol: {
        xs: { span: 0 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const {usrauthen} = orgInfoStore
    const {usrinfo} = orgInfoStore
    const {taglist} = orgInfoStore
    return (
      <div>
  <Tabs defaultActiveKey="1" onChange={callback} >
    <TabPane tab={<span><Icon type="user" />基本信息</span>} key="1">
    <div>
            
    <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/> <br/> <br/> </Col>
    </Row>
    <Row type="flex"   align="bottom" justify="center">
      <Col  span={2}  >头像:</Col>
      <Col span={14} > <Avatar size="large"  icon="user"  src={usrinfo.photoPath} /></Col>
    </Row>
     <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}>  <br/>  <br/> </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col  span={2}>用户id</Col>
      <Col span={8}>{usrinfo.userId}</Col>
      <Col  span={2}>用户昵称</Col>
      <Col span={4}>{usrinfo.nickname}</Col>
    </Row>
     <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>云信token</Col>
      <Col span={8}>{usrinfo.cloudUsrAccount}</Col>
      <Col  span={2}>云信accid</Col>
      <Col span={4}>{usrinfo.cloudUsrId}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>用户身份</Col>
      <Col span={8}>{usrinfo.userIdentityValue}</Col>
      <Col  span={2}>用户类型</Col>
      <Col span={4}>{usrinfo.userTypeValue}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>账号</Col>
      <Col span={8}>{usrinfo.account}</Col>
      <Col  span={2}>用户手机号</Col>
      <Col span={4}>{usrinfo.userPhone}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>性别</Col>
      <Col span={8}>{usrinfo.sex==0?'未知':''}{usrinfo.sex==1?'男':''}{usrinfo.sex==2?'女':''}</Col>
      <Col  span={2}>年龄</Col>
      <Col span={4}>{usrinfo.age}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>电子邮箱</Col>
      <Col span={8}>{usrinfo.email}</Col>
      <Col  span={2}>QQ号</Col>
      <Col span={4}>{usrinfo.qq}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>年级</Col>
      <Col span={8}>{usrinfo.gradeName}</Col>
      <Col  span={2}>班级</Col>
      <Col span={4}>{usrinfo.className}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>城市</Col>
      <Col span={8}>{usrinfo.cityName}</Col>
      <Col  span={2}>推荐人</Col>
      <Col span={4}>{usrinfo.agentName}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={4} >标签身份</Col> 
      <Col span={12} >
          {taglist.map((e,key) =>{
            return(
              <Col key={key} span={12}  style={{backgroundColor:"#3899ff",display:"block",color:"#fff" ,borderRadius:"20px" ,padding:4  }} >
              {e}          
              </Col>
            )
          }
          )}
          <Col span={4} align="center" justify="center" style={{backgroundColor:"#3899ff" ,color:"#fff" ,borderRadius:"20px" ,padding:4 ,paddingLeft:15 }}>超级学霸</Col>      
      </Col>
     
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>个性签名</Col>
      <Col span={14}>{usrinfo.mySign}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>机构名称</Col>
      <Col span={8}>{usrinfo.orgName}</Col>
      <Col  span={2}>机构类型</Col>
      <Col span={4}>{usrinfo.orgType==1?'学校':''}{usrinfo.orgType==1?'辅导机构':''}{usrinfo.orgType==1?'培训机构':''}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>机构联系人</Col>
      <Col span={8}>{usrinfo.linkName}</Col>
      <Col  span={2}>机构联系方式</Col>
      <Col span={4}>{usrinfo.billPhone}</Col>
    </Row>
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>机构地址</Col>
      <Col span={14}>{usrinfo.address}</Col>
    </Row>

    <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    <Row type="flex"   align="center" justify="center">
      <Col align="center" style={{width:120 ,  border:"1px solid red" ,borderRadius:2 ,textAlign:'center'}} >编辑</Col>
      
    </Row>
  </div>
    
    </TabPane>

    {/* 登录信息  */}
    <TabPane tab="登录信息" key="2">
       <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/> <br/> <br/> </Col>
    </Row>


    <Row type="flex"  align="bottom" justify="center">
      <Col span={2} justify="center" align="bottom" style={{   height:"44px" ,lineHeight:"44px" }}>第三方绑定</Col> 
      
   
      <Col span={8}   > 
            <img style={{width:"40px" ,marginRight:20,  height:"40px" ,borderRadius:"50%"}} src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2999613097,1574427479&fm=26&gp=0.jpg" />
            <img style={{width:"40px" ,marginRight:20,  height:"40px" ,borderRadius:"50%"}} src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2999613097,1574427479&fm=26&gp=0.jpg" />
            <img style={{width:"40px" ,marginRight:20,  height:"40px" ,borderRadius:"50%"}} src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2999613097,1574427479&fm=26&gp=0.jpg" />
          
      </Col>
     
      <Col span={6}   > 
            
      </Col>
    </Row>
    <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>   </Col>      
    </Row>


    <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>登陆总时长</Col>
      <Col span={14}>{usrinfo.loginTime}</Col>
    </Row>
     
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
 
      <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>注册时间</Col>
      <Col span={14}>{usrinfo.createTime}</Col>
    </Row>
      
      <Row type="flex"  align="bottom" justify="center">
      <Col  span={4}> <br/>  <br/>  </Col>
    </Row>
    
      <Row type="flex"  align="bottom" justify="center">
      <Col span={2}>登陆密码</Col>
      <Col span={14} type='password' >{usrinfo.password}</Col>
    </Row>

    </TabPane>
    <TabPane tab="认证信息" key="3">
    <div style={{width:'80%', margin:'auto'}}>
      {/*  开票信息 */}
    <span style={{lineHeight:4, fontSize:16}}>开票信息</span>
    <Row style={{border:"1px solid #ddd"}}   >  
          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}> <br/> <br/> <br/> </Col>
          </Row>
            
          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}>名称</Col>
            <Col span={6}>{usrinfo.userId}</Col>
            <Col  span={4}>银行账号</Col>
            <Col span={6}>{usrinfo.userId}</Col>
          </Row>

          
          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}> <br/>  </Col>
          </Row>
          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}>开户行 </Col>
            <Col span={6}>{usrinfo.userId}</Col>
            <Col  span={4}>纳税人识别号</Col>
            <Col span={6}>{usrinfo.userId}</Col>
          </Row>


          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}> <br/>   </Col>
          </Row>
          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}>电话</Col>
            <Col span={6}>{usrinfo.userId}</Col>
            <Col  span={4}>机构代码</Col>
            <Col span={6}>{usrinfo.userId}</Col>
          </Row>

          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}> <br/>   </Col>
          </Row>
          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}>注册地址</Col>
            <Col span={16}>{usrinfo.userId}</Col>
            
          </Row>
          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}> <br/> <br/> <br/> </Col>
          </Row>

        </Row>


         {/*  营业执照 */}
         <span style={{lineHeight:4, fontSize:16}}>营业执照</span>
         <div style={{border:"1px solid #ddd"}}   >
            <img style={{width:'100%'}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502706959821&di=a08c470e5011e9a9351c2fb4dffa5633&imgtype=0&src=http%3A%2F%2Fwww.sunheh.com%2FUploadFiles%2Fyyzzzb_big.jpg" />
         </div>

         <span style={{lineHeight:4, fontSize:16}}>营业执照</span>
         <div style={{border:"1px solid #ddd"}}   >
            <img style={{width:'100%'}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502706959821&di=a08c470e5011e9a9351c2fb4dffa5633&imgtype=0&src=http%3A%2F%2Fwww.sunheh.com%2FUploadFiles%2Fyyzzzb_big.jpg" />
         </div> 
        
        {/* 身份证信息资料 */}
         <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}> <br/> <br/> <br/> </Col>
          </Row>
          <Row type="flex"  align="bottom" justify="center">
            {/* <Col  span={2}>企业法人身份证正面   </Col> */}
            <Col span={10}>  
                <Row type="flex"  align="bottom" justify="left">
                    <Col  span={12} style={{fontSize:14, lineHeight:4,fontFamily:'微软雅黑'}} > 企业法人身份证正面 </Col>
                </Row>
                <Row type="flex" style={{border:"1px dashed #ddd"}}  align="bottom" justify="center">                   
                
                     <img style={{width:'100%'}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502707576187&di=738f0d35f1f41c1c1761e6a894f1b81f&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Faa64034f78f0f736dc19fb3d0855b319ebc41322.jpg" />
                </Row>
            </Col>
            {/* <Col  span={2}>企业法人身份证反面</Col> */}
            <Col span={4}>  </Col>
            <Col span={10}>  
                <Row type="flex"  align="bottom" justify="left">
                    <Col  span={12}  style={{fontSize:14 ,lineHeight:4,fontFamily:'微软雅黑' }} > 企业法人身份证正面 </Col>
                </Row>
                <Row type="flex" style={{border:"1px dashed #ddd"}}  align="bottom" justify="center">       
                  <img style={{width:'100%'}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502707576187&di=738f0d35f1f41c1c1761e6a894f1b81f&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Faa64034f78f0f736dc19fb3d0855b319ebc41322.jpg" />
                  </Row>
            </Col>
          </Row>

          {/*  分割线 */}
          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}> <br/> <br/> <br/>  <br/> <br/> <br/></Col>
          </Row>

          <hr style={{color:"#ddd"}} />
          <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}> <br/> <br/> <br/> </Col>  
          </Row>
          <span style={{lineHeight:4, fontSize:16}}>代理人信息</span>
          <Row type="flex"  style={{width:'100%',border:"1px solid #ddd" ,height:'50px' ,lineHeight:4,borderRadius:2}} >
                <p  style={{width:"50%" ,paddingLeft:'10px'}}  >代理人姓名： <span>王大力</span></p>
               
                <p  style={{width:"50%" ,paddingLeft:'10px'}} >身份证号码:   <span>123421347189457893</span> </p>
                
          </Row>


           {/* 身份证信息资料 */}
         <Row type="flex"  align="bottom" justify="center">
            <Col  span={4}> <br/> <br/> <br/> </Col>
          </Row>
          <Row type="flex"  align="bottom" justify="center">
            {/* <Col  span={2}>企业法人身份证正面   </Col> */}
            <Col span={10}>  
                <Row type="flex"  align="bottom" justify="left">
                    <Col  span={12} style={{fontSize:14, lineHeight:4,fontFamily:'微软雅黑'}} > 代理人身份证正面 </Col>
                </Row>
                <Row type="flex" style={{border:"1px dashed #ddd"}}  align="bottom" justify="center">                   
                
                     <img style={{width:'100%'}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502707576187&di=738f0d35f1f41c1c1761e6a894f1b81f&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Faa64034f78f0f736dc19fb3d0855b319ebc41322.jpg" />
                </Row>
            </Col>
            {/* <Col  span={2}>企业法人身份证反面</Col> */}
            <Col span={4}>  </Col>
            <Col span={10}>  
                <Row type="flex"  align="bottom" justify="left">
                    <Col  span={12}  style={{fontSize:14 ,lineHeight:4,fontFamily:'微软雅黑' }} > 代理人身份证正面 </Col>
                </Row>
                <Row type="flex" style={{border:"1px dashed #ddd"}}  align="bottom" justify="center">       
                  <img style={{width:'100%'}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502707576187&di=738f0d35f1f41c1c1761e6a894f1b81f&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Faa64034f78f0f736dc19fb3d0855b319ebc41322.jpg" />
                  </Row>
            </Col>
          </Row>
         

         </div>
      </TabPane>
  </Tabs>

      </div>
    )
  }
}

export default IndexContent

      
 

